<script>
import { mapState } from 'vuex'
import SetmealForm from '@/views/setmeal/components/setmealForm.vue'

export default {
  name: 'setmeal',
  components: { SetmealForm },
  data() {
    return {
      pageParams: {
        page: 1,
        pageSize: 10,
        categoryId: null,
        name: null,
        status: null
      },
      setmealFormRef: null,
      setmealList: [],
      selectIds: [],
      edit: false,
      drawer: false,
      flag: true
    }
  },
  methods: {
    /* 获取套餐分类的回调函数 */
    async fetchDishOrStemCategory() {
      try {
        this.setmealList = await this.$store.dispatch('dishStore/fetchDishOrStemCategoryAction', 2)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 获取套餐列表的接口 */
    async fetchSetmealList() {
      try {
        await this.$store.dispatch('setmalStore/fetchSetmealListAction', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 分页回调函数
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchSetmealList()
    },
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchSetmealList()
    },
    /* 表格组件的勾选回调函数 */
    handleSelectionChange(selectList) {
      this.selectIds = selectList
    },
    /* 删除套餐的回调函数 */
    async handleDelete(row) {
      const confirm = await this.$confirm(`确认删除${row.name}吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(error => error)
      if (confirm === 'cancel') return
      try {
        const message = await this.$store.dispatch('setmalStore/deleteSetmealAction', row.id)
        this.fetchSetmealList()
        this.$message.success(message)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 批量删除套餐 */
    async handleDeleteAll() {
      if (!this.selectIds.length) return
      try {
        const message = await this.$store.dispatch('setmalStore/deleteSetmealAction', this.selectIds.map(item => item.id).join(','))
        this.fetchSetmealList()
        this.$message.success(message)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 更新套餐状态的回调函数 */
    async updateStatus(status, id) {
      try {
        const newStatus = status === 1 ? 0 : 1
        const updateMessage = await this.$store.dispatch('setmalStore/updateSetmealStatusAction', { status: newStatus, id })
        await this.fetchSetmealList()
        this.$message.success(updateMessage)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击查询按钮的回调函数 */
    handleSearch() {
      this.fetchSetmealList()
    },

    /* 添加套餐的回调函数 */
    handleAdd() {
      this.edit = false
      this.drawer = true
      this.flag = false
    },

    /* 编辑套餐的回调函数 */
    handleEdit(row) {
      this.edit = true
      this.drawer = true
      this.flag = false
    }
  },
  computed: {
    ...mapState('setmalStore', ['records', 'total']),
    title() {
      return this.edit ? '编辑套餐' : '添加套餐'
    }
  },
  mounted() {
    this.fetchSetmealList()
    this.fetchDishOrStemCategory()
  }
}
</script>

<template>
  <div class="setmeal-container">
    <el-card shadow="never" v-if="flag">
      <div slot="header" class="clearfix">
        <el-form size="small" :model="pageParams">
          <el-form size="small" label-width="80px" inline :model="pageParams">
            <el-form-item label="套餐名称:">
              <el-input placeholder="请输入套餐名称" v-model="pageParams.name"></el-input>
            </el-form-item>
            <el-form-item label="套餐分类:">
              <el-select v-model="pageParams.categoryId">
                <el-option :value="undefined" label="所有分类"></el-option>
                <el-option v-for="(item) in setmealList" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="售卖状态:">
              <el-select v-model="pageParams.status">
                <el-option :value="undefined" label="所有"></el-option>
                <el-option :value="1" label="起售"></el-option>
                <el-option :value="0" label="停售"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="info" icon="el-icon-search" @click="handleSearch">查询套餐</el-button>
              <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDeleteAll">批量删除</el-button>
              <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建套餐</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </div>
      <el-table size="small" border stripe :data="records" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="套餐名称" align="center"></el-table-column>
        <el-table-column prop="description" label="套餐描述" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="套餐图片" align="center">
          <template #default="{row}">
            <el-avatar :size="40" :src="row.image">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="菜品分类" align="center"></el-table-column>
        <el-table-column label="套餐售价" align="center">
          <template #default="{row}">
            ￥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column label="售卖状态" align="center">
          <template #default="{row}">
            <el-switch v-model="row.status" disabled :active-value="1" :inactive-value="0" active-text="起售" inactive-text="停售" active-color="#13ce66"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="操作时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
            <el-button type="text" @click="updateStatus(row.status,row.id)">{{ row.status === 1 ? '停售' : '起售' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    </el-card>
    <div v-else>
      <setmeal-form ref="setmealFormRef" :setmeal-list="setmealList"></setmeal-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.setmeal-container {
  padding: 25px;

  .el-table {
    margin-bottom: 10px;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }

}
</style>
